
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        #div1 {
            width: 400px;
            height: 900px;
            border: #b1aeae 1px solid;
            margin: auto;
            padding: auto;
        }

        .it1 {
            margin-left: 50px;
            width: 300px;
            height: 30px;
        }

        .it2 {
            margin-left: 50px;
            width: 200px;
            height: 30px;

        }

        .it3 {
            margin-left: 50px;
        }

        #btn1 {
            width: 100px;
            height: 34px;
        }

        h2 {
            text-align: center;
        }

        p {
            margin-left: 50px;
        }

        select {
            margin-left: 50px;
        }

        input:last-child {
            width: 300px;
            height: 40px;
            margin-left: 50px;
        }
    </style>
    <div id="div1">
        <h2>用户注册</h2>
        <input type="text" name="" id="ipt1" class="it1" placeholder="请输入用户名" onkeyup="fun1()"><br>
        <span id="sp1"></span><br>
        <input type="text" name="" id="ipt2" class="it1" placeholder="请输入11位手机号" onkeyup="fun2()"><br>
        <span id="sp2"></span><br>
        <input type="text" id="ipt3" class="it2" placeholder="请输入验证码" onkeyup="fun3()"><button id="btn1">获取验证码</button><br>
        <span id="sp3"></span><br>
        <input type="text" id="ipt4" class="it1" placeholder="请输入长度为6-12个字符的密码" onkeyup="fun4()"><br>
        <span id="sp4"></span><br>
        <input type="text" id="ipt5" class="it1" placeholder="请再次输入密码" onkeyup="fun5()"><br>
        <span id="sp5"></span><br>
        <input type="text" id="ipt6" class="it1" placeholder="请输入邮箱.邮箱格式.123@163.com" onkeyup="fun6()"><br>
        <span id="sp6"></span><br>
        <p>请选择兴趣</p>
        <input type="checkbox" class="it3" id="iptt1">足球<input type="checkbox" id="iptt2">蓝球
        <input type="checkbox" id="iptt3">羽毛球<input type="checkbox" id="iptt4">网球
        <span id="sp7"></span>
        <p>请选择职业</p>
        <input type="checkbox" name="" id="" class="it3">程序员
        <input type="checkbox" name="" id="">设计师
        <input type="checkbox" name="" id="">架构师
        <span id="sp8"></span>
        <p>请选择性别</p>
        <input type="radio" name="" id="" class="it3">男
        <input type="radio" name="" id="">女
        <input type="radio" name="" id="">其他
        <span id="sp9"></span>
        <p>请选择收入</p>
        <select name="" id="">
            <option value="">请选择</option>
            <option value="">10000</option>
            <option value="">12000</option>
            <option value="">15000</option>
        </select>
        <span id="sp10"></span>
        <p>请选择支出</p>
        <select name="" id="">
            <option value="">请选择</option>
            <option value="">10000</option>
            <option value="">12000</option>
            <option value="">15000</option>
        </select> <br><br>
        <span id="sp11"></span>
        <input type="checkbox" name="" id="read" class="it3">我已阅读并同意<br><br>
        <input type="button" name="" id="ipttt" value="提交">
    </div>
</body>
<script>
    function fun1() {
        var obj = ipt1.value
        var reg = /^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,}/
        if (reg.test(obj)) {
            sp1.innerHTML = '√√√√√'
            sp1.style.color='green'
        } else {
            sp1.innerHTML = '输入不符合规则'
            sp1.style.color='red'
        }
    }

    function fun2() {
        var obj = ipt2.value
        var reg = /^1[2-9]\d{9}$/
        if (reg.test(obj)) {
            sp2.innerHTML = "√√√√√"
            sp2.style.color='green'
        } else {
            sp2.innerHTML = "输入不符合规则"
            sp2.style.color='red'
        }
    }

    function fun3() {
        var obj = ipt3.value
        var reg = /^[A-z\d]{5}$|^[A-z\d]{6}$/
        if (reg.test(obj)) {
            sp3.innerHTML = "√√√√√"
            sp3.style.color='green'
        } else {
            sp3.innerHTML = "输入不符合规则"
            sp3.style.color='red'
        }
    }

    function fun4() {
        var obj = ipt4.value
        var reg = /^\d{6,12}$/
        if (reg.test(obj)) {
            sp4.innerHTML = "√√√√√"
            sp4.style.color='green'
        } else {
            sp4.innerHTML = "输入不符合规则"
            sp4.style.color='red'
        }
    }

    function fun5() {
        var obj = ipt4.value
        var reg = ipt5.value
        console.log(obj);
        if (obj == reg) {
            sp5.innerHTML = "√√√√√"
            sp5.style.color='green'
        } else {
            sp5.innerHTML = "输入不符合规则"
            sp5.style.color='red'
        }
    }

    function fun6() {
        var obj = ipt6.value
        var reg = /^([0-9|a-z]*)@([a-z|0-9]*)(\.[a-z|0-9]*)$/i
        if (reg.test(obj)) {
            sp6.innerHTML = "√√√√√"
            sp6.style.color='green'
        } else {
            sp6.innerHTML = "输入不符合规则"
            sp6.style.color='red'
        }
    }

    document.getElementById('ipttt').onclick = function () {
        console.log(12);
        var iptt1 = document.getElementsByTagName('input')[6],
            iptt2 = document.getElementsByTagName('input')[7],
            iptt3 = document.getElementsByTagName('input')[8],
            iptt4 = document.getElementsByTagName('input')[9],
            iptt5 = document.getElementById('read')
        if (iptt1.checked == false && iptt2.checked == false && iptt3.checked == false && iptt4.checked == false) {
            sp7.innerHTML = '必须选一个'
            sp7.style.color='red'
        } else {
            sp7.innerHTML = '√√√√√'
            sp8.innerHTML = '√√√√√'
            sp9.innerHTML = '√√√√√'
            sp10.innerHTML = '√√√√√'
            sp11.innerHTML = '√√√√√'
            sp7.style.color='green'
            sp8.style.color='green'
            sp9.style.color='green'
            sp10.style.color='green'
            sp11.style.color='green'
        }
        let str=document.getElementsByTagName('span')
        for(let i=0;i<str.length;i++){
            if(str[i].innerHTML=='√√√√√'&&read.value){
                window.location.href='https://www.baidu.com/'
            }else{
                alert('请填写完整信息')
                return
            }
        }


    }
</script>
</html>